<template>
  <div class="dashboard-container">
    <el-container>
      <Sidebar />
      
      <el-container direction="vertical">
        <el-header class="dashboard-header">
          <div class="header-content">
            <div class="header-title">
              <span class="title-text">在线教育平台</span>
              <div class="title-line"></div>
            </div>
            <div class="header-search">
              <el-input
                placeholder="搜索课程..."
                prefix-icon="el-icon-search"
                v-model="searchKeyword"
                @keyup.enter.native="handleSearch">
              </el-input>
            </div>
          </div>
        </el-header>
        
        <el-main class="main-content">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Sidebar from '@/components/Sidebar.vue'

export default {
  components: {
    Sidebar
  },
  data() {
    return {
      searchKeyword: ''
    }
  },
  methods: {
    handleSearch() {
      // 搜索逻辑，可以通过路由跳转到课程购买页面并传递搜索关键词
      if (this.searchKeyword.trim()) {
        this.$router.push({
          path: '/dashboard/purchase',
          query: { search: this.searchKeyword }
        });
      }
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  height: 100vh;
  overflow: hidden;
}

.el-container {
  height: 100%;
}

.dashboard-header {
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  padding: 0 20px;
  display: flex;
  align-items: center;
  height: 60px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.header-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.title-text {
  font-size: 20px;
  font-weight: bold;
  color: #409EFF;
}

.title-line {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #409EFF, #87CEFA);
  margin-top: 5px;
  border-radius: 3px;
}

.header-search {
  width: 300px;
}

.main-content {
  padding: 0;
  background-color: #f5f7fa;
  overflow: auto;
  height: calc(100% - 60px);
}
</style>